<div class="main-section">
    <h1 class="main-section__title">Icon</h1>

    <p class="main-section__intro">
        <code>lx-icon</code> is a directive that create an icon based on <a href="http://materialdesignicons.com" target="_blank">Material Design Icons</a>.
    </p>

    <lx-component lx-title="Simple icons" lx-path="/includes/modules/icon/includes/simple-icons.html"></lx-component>
    <lx-component lx-title="Styled icons" lx-path="/includes/modules/icon/includes/styled-icons.html"></lx-component>

    <lx-component-attributes>
        <table>
            <thead>
                <tr>
                    <th>Parameter</th>
                    <th>Type</th>
                    <th>Default</th>
                    <th>Description</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>lx-color</td>
                    <td><code>string</code></td>
                    <td></td>
                    <td>Define the icon color. Options: colors defined in colors and sizes section in <code>dist/scss/core/settings/defaults.scss</code></td>
                </tr>
                <tr>
                    <td>lx-id*</td>
                    <td><code>string</code></td>
                    <td></td>
                    <td>The icon identifier that can be found in <a href="http://materialdesignicons.com" target="_blank">Material Design Icons website</a>.</td>
                </tr>
                <tr>
                    <td>lx-size</td>
                    <td><code>string</code></td>
                    <td></td>
                    <td>Define the icon size. Options: <code>xs</code>, <code>s</code>, <code>m</code>, <code>l</code>, <code>xl</code></td>
                </tr>
                <tr>
                    <td>lx-type</td>
                    <td><code>string</code></td>
                    <td></td>
                    <td>Define the icon type. Options: <code>circled</code>, <code>icon</code></td>
                </tr>
            </tbody>
        </table>
    </lx-component-attributes>
</div>